<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-row :gutter="6" style="margin-bottom: 10px">
          <el-col :span="24">
            <el-card>
              <div style="margin-top: 20px">
                <el-form
                  class="filter-container"
                  label-position="left"
                  label-width="68px"
                >
                  <el-row :gutter="24">
                    <el-col :span="8">
                      <el-form-item
                        label="标签名称"
                        style="margin-bottom: 0 !important"
                      >
                        <el-select
                          v-model="listQuery.tagCode"
                          ref="elSelec"
                          value-key="tag_code"
                          filterable
                          remote
                          reserve-keyword
                          :loading="loading"
                          :remote-method="remoteMethod"
                          :name="labelName"
                          @change="changeLabelName"
                          placeholder="请选择"
                          
                        >
                          <el-option
                            v-for="item in tagOptions"
                            :key="item.tag_code"
                            :label="item.name"
                            :value="item.tag_code"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item
                        label="统计日期"
                        style="margin-bottom: 0 !important"
                      >
                        <el-date-picker
                          :clearable="true"
                          type="datetimerange"
                          :picker-options="pickerOptions"
                          :default-time="['00:00:00', '23:59:59']"
                          @keyup.enter.native="getList"
                          style="width: 450px"
                          class="filter-item"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          v-model="listQuery.time"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item
                        label=""
                        style="margin-bottom: 0 !important"
                      >
                        <el-button
                          class="filter-item"
                          type="primary"
                          icon="el-icon-search"
                          @click="searchLabelList"
                          >查询</el-button
                        >
                        <!-- <el-button class="filter-item el-icon-refresh" style="margin-left: 10px" @click="resetSearch" type="primary">重置</el-button> -->
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-row :gutter="6" style="margin-bottom: 10px">
          <el-col :span="24">
            <el-card>
              <div style="margin-top: 20px">
                <div slot="header" class="clearfix">
                  <span>资讯热度</span>
                </div>
                <div style="margin-top: 20px">
                  <div id="zxrd" class="echartsDet"></div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-row :gutter="6" style="margin-bottom: 10px">
          <el-col :span="24">
            <el-card>
              <div style="margin-top: 20px">
                <div slot="header" class="clearfix">
                  <span>资讯列表</span>
                </div>
                <div style="margin-top: 20px">
                  <el-tabs
                    v-model="activeName"
                    type="card"
                    @tab-click="handleClick"
                  >
                    <el-tab-pane
                      :label="'全部 ' + labelTabCount.allCount"
                      name="first"
                    >
                      <el-table
                        :data="tableData"
                        style="width: 100%"
                        max-height="600"
                        align="center"
                      >
                        <el-table-column
                          prop="publishTime"
                          label="发布时间"
                          width="180"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="title"
                          label="标题"
                          align="center"
                        >
                          <template slot-scope="scope">
                            <el-button
                              class="preview-button"
                              type="text"
                              @click="handleShow(scope.row)"
                              >{{ scope.row.title }}</el-button
                            >
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="source"
                          label="来源"
                          width="240"
                          align="center"
                        >
                        </el-table-column>
                      </el-table>
                      <div class="pagination-container">
                        <el-pagination
                          background
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page.sync="pageNum"
                          :page-sizes="[10, 20, 30, 50]"
                          :page-size="pageSize"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="total"
                        >
                        </el-pagination>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane
                      :label="
                        '强相关 (' +
                        (labelTabCount.strongCorrelationCount
                          ? labelTabCount.strongCorrelationCount
                          : 0) +
                        ')'
                      "
                      name="second"
                    >
                      <el-table
                        :data="tableData"
                        style="width: 100%"
                        max-height="600"
                        align="center"
                      >
                        <el-table-column
                          prop="publishTime"
                          label="发布时间"
                          width="180"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="title"
                          label="标题"
                          align="center"
                        >
                          <template slot-scope="scope">
                            <el-button
                              class="preview-button"
                              type="text"
                              @click="handleShow(scope.row)"
                              >{{ scope.row.title }}</el-button
                            >
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="source"
                          label="来源"
                          width="240"
                          align="center"
                        >
                        </el-table-column>
                      </el-table>
                      <div class="pagination-container">
                        <el-pagination
                          background
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page.sync="pageNum"
                          :page-sizes="[10, 20, 30, 50]"
                          :page-size="pageSize"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="total"
                        >
                        </el-pagination>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane
                      :label="
                        '弱相关 (' +
                        (labelTabCount.weakCorrelationCount
                          ? labelTabCount.weakCorrelationCount
                          : 0) +
                        ')'
                      "
                      name="third"
                    >
                      <el-table
                        :data="tableData"
                        style="width: 100%"
                        max-height="600"
                        align="center"
                      >
                        <el-table-column
                          prop="publishTime"
                          label="发布时间"
                          width="180"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="title"
                          label="标题"
                          align="center"
                        >
                          <template slot-scope="scope">
                            <el-button
                              class="preview-button"
                              type="text"
                              @click="handleShow(scope.row)"
                              >{{ scope.row.title }}</el-button
                            >
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="source"
                          label="来源"
                          width="240"
                          align="center"
                        >
                        </el-table-column>
                      </el-table>
                      <div class="pagination-container">
                        <el-pagination
                          background
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page.sync="pageNum"
                          :page-sizes="[10, 20, 30, 50]"
                          :page-size="pageSize"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="total"
                        >
                        </el-pagination>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog
      :fullscreen="true"
      :title="'查看'"
      :visible.sync="dialogFormVisible2"
      append-to-body
    >
      <el-form
        :model="temp"
        label-position="left"
        label-width="130px"
        style="margin: auto; max-width: 1200px"
      >
        <el-form-item label="标题" prop="title">
          <el-input disabled v-model="temp.title" type="text"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="股票">
              <el-tooltip
                v-for="tag in temp.stockInfoslist"
                :key="tag.tag_code"
                class="item"
                effect="dark"
                :content="String(tag.score)"
              >
                <el-tag>{{ tag.name + "(" + tag.code + ")" }}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.stockInfoslist" :key="tag.tag_code">{{tag.name+'('+tag.code+')'}}</el-tag> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="基金">
              <el-tooltip
                v-for="tag in temp.fundInfoslist"
                :key="tag.tag_code"
                class="item"
                effect="dark"
                :content="String(tag.score)"
              >
                <el-tag>{{ tag.name + "(" + tag.code + ")" }}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.fundInfoslist" :key="tag.tag_code">{{tag.name+'('+tag.code+')'}}</el-tag> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="主题">
              <el-tooltip
                v-for="tag in options0"
                :key="tag.tag_code"
                class="item"
                effect="dark"
                :content="String(tag.score)"
              >
                <el-tag>{{ tag.name }}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in options0" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行业">
              <el-tooltip
                v-for="tag in options1"
                :key="tag.tag_code"
                class="item"
                effect="dark"
                :content="String(tag.score)"
              >
                <el-tag>{{ tag.name }}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in options1" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="市场">
              <el-tooltip
                v-for="tag in temp.marketInfos"
                :key="tag.tag_code"
                class="item"
                effect="dark"
                :content="String(tag.score)"
              >
                <el-tag>{{ tag.name }}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.marketInfos" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人物">
              <el-tooltip
                v-for="tag in temp.peopleInfos"
                :key="tag.tag_code"
                class="item"
                effect="dark"
                :content="String(tag.score)"
              >
                <el-tag>{{ tag.name }}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.peopleInfos" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="地域">
              <el-tooltip
                v-for="tag in temp.districtInfos"
                :key="tag.tag_code"
                class="item"
                effect="dark"
                :content="String(tag.score)"
              >
                <el-tag>{{ tag.name }}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.districtInfos" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组织">
              <el-tooltip
                v-for="tag in temp.organInfos"
                :key="tag.tag_code"
                class="item"
                effect="dark"
                :content="String(tag.score)"
              >
                <el-tag>{{ tag.name }}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.organInfos" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="核心标签(主)" prop="mainKeyword">
              <el-tag v-for="tag in temp.mainKeyword" :key="tag">{{
                tag
              }}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="核心标签(副)" prop="viceKeyword">
              <el-tag v-for="tag in temp.viceKeyword" :key="tag">{{
                tag
              }}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="所属栏目" prop="newsClassId">
              <el-select
                value-key="id"
                multiple
                popper-class="hide"
                disabled
                v-model="temp.newsClassId"
                type="text"
                placeholder="请输入"
              >
                <el-option
                  v-for="(item, index) in options"
                  :key="item.id"
                  :value="item"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="第三方栏目" prop="events">
              <el-tag
                v-for="tag in temp.thirdPartClassVOS"
                :key="tag.className"
                >{{ tag.className }}</el-tag
              >
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="数据源来源" prop="tbSource">
              <el-input v-model="temp.tbSource" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col
            :span="6"
            style="line-height: 36px; color: #666666; font-weight: 700"
            >App场景运营标记:</el-col
          >
          <el-col :span="6">
            <el-form-item label="覆盖类型" prop="ranges">
              <el-select
                disabled
                v-model="temp.ranges"
                type="text"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in rangesOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="展示场景" prop="scene">
              <el-select
                disabled
                multiple
                v-model="temp.scene"
                type="text"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in sceneOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="新闻类型" prop="newstype">
              <el-select
                disabled
                v-model="temp.newstype"
                type="text"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in newstypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="态度" prop="attitude">
              <el-select
                disabled
                v-model="temp.attitude"
                type="text"
                placeholder="请选择"
              >
                <el-option :value="-2" label="无态度"></el-option>
                <el-option :value="-1" label="利空"></el-option>
                <el-option :value="0" label="中性"></el-option>
                <el-option :value="1" label="利好"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="online">
              <el-select
                disabled
                v-model="temp.online"
                type="text"
                placeholder="请选择"
              >
                <el-option :value="0" label="立即上线"></el-option>
                <el-option :value="1" label="暂缓上线"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="推送方式" prop="sendChannel">
              <el-select
                disabled
                :default-first-option="true"
                v-model="temp.sendChannel"
                type="text"
                placeholder="请选择"
              >
                <el-option value="全员推送" label="全员推送"></el-option>
                <el-option value="不推送" label="不推送"></el-option>
                <el-option value="按板块推送" label="按板块推送"></el-option>
                <el-option value="按个股推送" label="按个股推送"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="置顶时间" prop="topTime">
              <el-input
                disabled
                v-model="temp.topTime"
                type="text"
                placeholder="选择日期"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="摘要" prop="summary">
              <el-input
                disabled
                v-model="temp.summary"
                type="textarea"
                :rows="5"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="正文预览" prop="content">
              <el-tabs type="card">
                <el-tab-pane label="手机预览">
                  <el-card class="phone">
                    <div class="top-bar">资讯预览</div>
                    <div class="title">{{ temp.title }}</div>
                    <div class="info">
                      <span>来源：{{ formatSource(temp.source) }}&emsp;</span>
                      <span>发布时间：{{ temp.updateTime }}</span>
                    </div>
                    <div class="summary">摘要：{{ temp.summary }}</div>
                    <div class="content">
                      <p v-html="formatContent(temp)"></p>
                    </div>
                  </el-card>
                </el-tab-pane>
                <el-tab-pane label="PC预览">
                  <el-card class="pc">
                    <div class="title">{{ temp.title }}</div>
                    <div class="info">
                      <span>来源：{{ formatSource(temp.source) }}&emsp;</span>
                      <span>发布时间：{{ temp.updateTime }}</span>
                    </div>
                    <div class="summary">摘要：{{ temp.summary }}</div>
                    <div class="content">
                      <p v-html="formatContent(temp)"></p>
                    </div>
                  </el-card>
                </el-tab-pane>
              </el-tabs>
            </el-form-item>
          </el-col>
          <el-col v-show="preview" :span="24">
            <el-form-item label="原文">
              <el-card>
                <div class="preview" v-html="previewContent"></div>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="发布时间" prop="publishTime">
              <el-input
                disabled
                v-model="temp.publishTime"
                type="text"
                :rows="5"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="来源" prop="source">
              <el-select
                disabled
                v-model="temp.source"
                type="text"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in dataDict.news_source"
                  :key="item.dictValue"
                  :value="item.dictValue"
                  :label="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button
                plain
                class="search-bar-button"
                style="border-width: 2px"
                type="primary"
                @click="extendBarVisable = !extendBarVisable"
                >{{ extendBarVisable ? "收起" : "展开" }}附加字段<i
                  :class="
                    extendBarVisable
                      ? 'el-icon-caret-top'
                      : 'el-icon-caret-bottom'
                  "
                ></i>
              </el-button>
            </el-form-item>
          </el-col>
          <el-col v-show="extendBarVisable" v-for="i of 10" :key="i" :span="24">
            <el-form-item :label="'附加字段' + i" :prop="'additional_' + i">
              <el-input
                disabled
                v-model="temp['additional_' + (i - 1)]"
                type="text"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="资讯配图">
              <span v-if="!image">暂无配图</span>
              <img
                style="max-height: 300px"
                :src="image.url"
                :alt="image.name"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible2 = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { tagsSearch, articleGet, userClassList } from "../../api/article";
import { 
  getTagsdetail,
  getTagNewsGraph, 
  getLabelList,
  getTabCountList } from "../../api/label";
import echarts from "echarts";
import { getTypeDict } from "../../api/systemManagement";
require("echarts/theme/macarons"); // echarts theme
import { debounce } from "@/utils";
export default {
  name: "labelDetails",
  data() {
    return {
      labelName:"",
      tagqueryName:'',
      listQuery: {
        stockCode: "",
        time: [],
      },
      previewContent: "",
      tagOptions: [],
      activeName: "first",
      extendBarVisable: false,
      loading: false,
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      temp: {
        attitude: 0,
        author: "",
        source: "",
        isOriginal: 1,
        content: "",
        sendChannel: "",
        newsClassId: [],
        newsPlateCodes0: [],
        conceptInfos: [],
        conceptInfoslist: [],
        industryInfos: [],
        newsPlateCodes2: [],
        stockInfos: [],
        stockInfoslist: [],
        fundInfos: [],
        fundInfoslist: [],
        marketInfos: [],
        topTime: "",
        summary: "",
        title: "",
        enterTime: "",
        publishTime: "",
        tbSource: "",
      },
      rangesOptions: [
        {
          value: 0,
          label: "空白",
        },
        {
          value: 1,
          label: "按全市场来",
        },
        {
          value: 2,
          label: "按行业",
        },
        {
          value: 3,
          label: "按个股",
        },
      ],
      sceneOptions: [
        {
          value: "0",
          label: "空白",
        },
        {
          value: "1",
          label: "银小河浮窗",
        },
      ],
      newstypeOptions: [
        {
          value: 0,
          label: "空白",
        },
        {
          value: 1,
          label: "新闻",
        },
        {
          value: 2,
          label: "重磅",
        },
        {
          value: 3,
          label: "突发",
        },
        {
          value: 4,
          label: "解读",
        },
        {
          value: 5,
          label: "异动",
        },
        {
          value: 6,
          label: "公告",
        },
      ],
      options: [],
      options0: [],
      options1: [],
      options2: [],
      pvData: [],
      rwList: [],
      rwOptions: [],
      jgList: [],
      organOptions: [],
      areaList: [],
      areaOptions: [],
      arealoading: false,
      flowChartList: [],
      dialogFormVisible2: false,
      dataDict: {
        news_source: [],
      },
      preview: false,
      image: "",
      treeList: [{ name: "栏目列表", id: 0, children: [] }],
      labelTabCount:{
        allCount: 1,
        strongCorrelationCount: 0,
        weakCorrelationCount: 1
      },
      pickerOptions:{
          disabledDate:(time)=>{
              return time.getTime() >Date.now() || time.getTime() === Date.now() ||time.getTime()< new Date().setFullYear((new Date().getFullYear() - 1))
          }
      },
      timer:null
    };
  },
  watch: {
    tagDetails:{
        handler(newValue,oldValue){
            this.listQuery.tagCode = newValue.tagCode;
            this.getLabelName(newValue.name)
            this.getClass();
            this.getDict();
            this.getpic();
            this.getList();
        },
        immediate:false
    }
  },
  props: {
    tagDetails: {
      type: Object,
      default: true,
    },
    tagType: {
      type: String,
      default: true,
    },
  },
  computed: {},
  methods: {
    handleClick(tab, event) {
      this.activeName = tab.name;
      this.getList()
    },
    initChart(data) {
      this.chart = echarts.init(document.getElementById("zxrd"));
      let xdata = data.map((i) => i.publishTime);
      let ydata = data.map((i) => i.newsNum);
      this.chart.setOption({
        xAxis: {
          type: "category",
          data: xdata,
        },
        tooltip:{
          show:true,
          trigger:'axis',
          formatter:function(params){
            let str= `<span>时间为:${params[0].name}</span><br/><span>热度值为:${params[0].data}</span>`
            return str;
          }
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: ydata,
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#0094ff",
                },
              },
            },
          },
        ],
      });     
    },
    getList() {
      let  queryParams ={
        tagCode: this.listQuery.tagCode,
        startTime: this.formatDate(this.listQuery.time[0]),
        endTime: this.formatDate(this.listQuery.time[1]),
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      } 

      if(this.activeName==='first'){
          queryParams.queryType = 0;
      }else if(this.activeName==='second'){
          queryParams.queryType = 1;
      }else{
          queryParams.queryType = 2;
      }
      // getTagsdetail
      getLabelList({
       ...queryParams
      }).then((res) => {
        this.tableData = res.Data;
        this.total = Number(res.total);
        this.getTabCount();
      });
    },
    getpic() {
      getTagNewsGraph({
        tagCode: this.listQuery.tagCode,
        startTime: this.formatDate(this.listQuery.time[0]),
        endTime: this.formatDate(this.listQuery.time[1]),
      }).then((res) => {
        if (res.Meta.Code === 0) {
          this.initChart(res.Data);
        }
      });
    },
    resetSearch() {
      const end =
        new Date(
          new Date().getFullYear(),
          new Date().getMonth(),
          new Date().getDate() + 1
        ).getTime() - 1000;
      const start = end + 1000 - 3600 * 1000 * 24 * 3;
      this.listQuery.time = [start, end];
      this.listQuery.stockCode=''
      this.getList()
      this.getpic()
    },
    searchLabelList(){
      this.getList();
      this.getpic();
    },
    formatDate(value) {
      console.log('timer',value);

      if (typeof value == "undefined") {
        return "";
      } else {
        let date = null;
        if(typeof(value) ==="string"){
           date = new Date(parseInt(value));
        }else{
          date = new Date(value);
        }

        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
      }
    },
    debounce(fn,wait){
       let  that = this;
      return function(){
        if(that.timer!==null){
          clearTimeout(that.timer)
        }
        that.timer = setTimeout(fn,wait);
      }
    },
    remoteMethod(query) {
      let  that = this;
      return new Promise((resolve,reject)=>{

        let  that = this;
        const loadOptions = ()=>{

          if (query !== "") {
            that.loading = true;
            tagsSearch({
              // type: this.tagType,
              name: query,
            }).then((res) => {
              let list = res.Data.map((i) => {
                return {
                  ...i,
                  tag_code: i.tagCode,
                };
              });
              that.loading = false;
              that.tagOptions = list;
              resolve(list)
            });
          } else {
            that.loading = false;
            that.tagOptions = [];
            resolve([]);
          }
        }
        that.debounce(loadOptions,2000)();
      })
    },
    getDict() {
      getTypeDict({ type: "news_source" }).then((response) => {
        this.dataDict.news_source = response.Data;
      });
    },
    handleSizeChange(data) {
      this.pageSize = data;
      this.getList();
    },
    handleCurrentChange(data) {
      this.pageNum = data;
      this.getList();
    },
    formatContent(data) {
      if (!data.content) return;
      // console.log(data)
      const keyword = [];
      // console.log(data)
      if (data.stockInfos && data.stockInfos.length > 0) {
        keyword.push(
          data.stockInfos
            .map((val) => {
              return val.name;
            })
            .join("|")
        );
      }
      if (data.conceptInfos && data.conceptInfos.length > 0) {
        keyword.push(
          data.conceptInfos
            .map((val) => {
              return val.name;
            })
            .join("|")
        );
      }
      if (data.industryInfos && data.industryInfos.length > 0) {
        keyword.push(
          data.industryInfos
            .map((val) => {
              return val.name;
            })
            .join("|")
        );
      }
      if (data.newsPlateCodes2 && data.newsPlateCodes2.length > 0) {
        keyword.push(
          data.newsPlateCodes2
            .map((val) => {
              return val.name;
            })
            .join("|")
        );
      }

      const fenD = data.classInfos[0] || { name: "" };
      let content;
      if (fenD.name == "港澳资讯") {
        content = data.content.replace(/(\r\n)|(\r)|(\n)/g, "<br /><br />");
      } else {
        content = data.content;
      }
      if (keyword.length === 0) return content;
      const contentReg = new RegExp(
        "(?!<[^>]*)(" + keyword.join("|").replace(/\*/g, "\\*") + ")(?![^<]*>)",
        "g"
      );
      // console.log(contentReg)
      return content.replace(
        contentReg,
        '<span class="news-keyword">$1</span>'
      );
    },
    formatSource(data) {
      for (let i = 0; i < this.dataDict.news_source.length; i++) {
        if (this.dataDict.news_source[i].dictValue === data) {
          return this.dataDict.news_source[i].dictValue;
        }
      }
      return data;
    },
    getClass() {
      const params = {
        pageNum: 1,
        pageSize: 9999,
      };
      userClassList(params).then((response) => {
        const temp = {};
        const result = [];
        const data = response.Data;
        const length = data.length;
        for (let i = 0; i < length; i++) {
          temp[data[i].id] = data[i];
          this["options"].push(data[i]);
        }
        for (let i = 0; i < length; i++) {
          if (temp[data[i].id].parentId && temp[data[i].parentId]) {
            if (!temp[data[i].parentId].children) {
              temp[data[i].parentId].children = [];
            }
            temp[data[i].parentId].children.push(temp[data[i].id]);
          } else {
            result.push(temp[data[i].id]);
          }
        }
        // this['treeList'][0].children = result
        this.$set(this["treeList"][0], "children", result);
      });
    },
    handleShow(row) {
      this.preview = false;
      row.editLoading = true;
      articleGet(row).then((response) => {
        this.temp = Object.assign({}, response.Data[0]);
        var ranges = this.temp.ranges || 0;
        var scene =
          this.temp.scene === undefined
            ? ["0"]
            : this.temp.scene.split(",").filter((item) => {
                return item !== "";
              });
        var newstype = this.temp.newstype || 0;
        for (let i = 0; i < this.temp.newsInfoExtends.length; i++) {
          this.temp["additional_" + this.temp.newsInfoExtends[i].extendIndex] =
            this.temp.newsInfoExtends[i].extendContent || "";
        }
        this.image = response.Data[0].pictureEntity || "";
        if (this.temp.online === 2) this.temp.online = 0;
        this.temp.stockInfoslist = Object.assign(
          {},
          response.Data[0].stockInfos
        );
        this.temp.fundInfoslist = Object.assign({}, response.Data[0].fundInfos);
        this.options0 = Object.assign([], this.temp.conceptInfos);
        this.options1 = Object.assign([], this.temp.industryInfos);
        this.options2 = Object.assign([], this.temp.userDefinedInfos);
        this.organOptions = Object.assign([], this.temp.organInfos);
        this.flowChartList = Object.assign([], this.temp.marketInfos);
        this.rwOptions = Object.assign([], this.temp.peopleInfos);
        this.areaOptions = Object.assign([], this.temp.districtInfos);
        this.$set(
          this.temp,
          "newsPlateCodes2",
          Object.assign([], this.temp.userDefinedInfos)
        );
        this.$set(
          this.temp,
          "newsClassId",
          Object.assign([], this.temp.classInfos)
        );
        this.$set(this.temp, "ranges", ranges);
        this.$set(this.temp, "scene", scene);
        this.$set(this.temp, "newstype", newstype);

        // this.dialogStatus = 'update';
        this.dialogFormVisible2 = true;
        row.editLoading = false;
      });
    },
    getTabCount(){
      getTabCountList({
         tagCode: this.listQuery.tagCode,
         startTime: this.formatDate(this.listQuery.time[0]),
         endTime: this.formatDate(this.listQuery.time[1])
      }).then(res=>{
        console.log('tabcount',res.Data);
        let list = Array.isArray(res.Data)?res.Data:[];
        if(list.length>0){
          this.labelTabCount ={...list[0]}
        }else{
          this.labelTabCount = {
              allCount: 0,
              strongCorrelationCount: 0,
              weakCorrelationCount: 0
          }
        }
      })
    },
    getLabelName(name){
      let that = this;
      this.remoteMethod(name).then(res=>{
          // that.labelName = name;
          that.listQuery.tagCode = that.tagDetails.tagCode;
      }); 
    },
    changeLabelName(val){
      this.listQuery.tagCode = val;
      let  nameObj = this.tagOptions.filter(value=>{
          return value.tag_code ==val;
      })
      this.remoteMethod(nameObj[0].name)
    }
  },
  mounted() {
    console.log(this.tagDetails);
    // this.getLabelName(this.tagDetails.name)
     this.listQuery.tagCode = this.tagDetails.tagCode;
      this.$refs.elSelec.$el.getElementsByTagName('input')[0].oninput = (e)=>{
          this.$refs.elSelec.remoteMethod(e.target.value)
        }
    const end =
      new Date(
        new Date().getFullYear(),
        new Date().getMonth(),
        new Date().getDate() + 1
      ).getTime() - 1000;
    const start = end + 1000 - 3600 * 1000 * 24 * 30;
    this.listQuery.time = [start, end];
    console.log(this.listQuery.time);
    this.getClass();
    this.getDict();
    this.getpic();
    this.getList()
    window.onresize = function(){
      this.getpic();
    }
  },
  created(){
    let  that = this;
    this.remoteMethod(that.tagDetails.name)
  },
  destroyed() {},
};
</script>

<style >
.filter-container .el-range-editor--medium.el-input__inner {
  height: 40px;
}

.filter-container .el-range-editor.el-input__inner {
  padding: 0px 10px !important;
}
</style>

<style lang="stylus" scoped>
.container {
  // width: 100%;
  height: 100%;
}

.echartsDet {
  width: 100%;
  height: 350px;
}

.phone {
  word-break: break-all;
  line-height: 24px;
  margin: auto;
  width: 375px;
  height: 600px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .top-bar {
    text-align: center;
    padding: 10px 15px;
    margin: 0 -20px;
    position: absolute;
    top: 0;
    width: 373px;
    background-color: #000;
    color: #fff;
    font-size: 120%;
    font-weight: bold;
  }

  .title {
    text-align: justify;
    margin-top: 52px;
    font-size: 110%;
    font-weight: bolder;
  }

  .info {
    font-size: 85%;
    color: #5d5d5d;
  }

  .summary {
    text-align: justify;
    padding: 5px 10px;
    margin: 10px 0 10px;
    font-size: 90%;
    line-height: 1.2rem;
    color: #333;
    border-radius: 5px;
    background-color: #ddd;
  }

  .content {
    text-align: justify;

    &:after {
      display: inline-block;
      content: '';
      padding-left: 100%;
    }
  }
}

.pc {
  word-break: break-all;
  line-height: 24px;
  font-size: 16px;
  margin: auto;
  width: 100%;
  height: 600px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .title {
    text-align: justify;
    margin-top: 12px;
    font-size: 120%;
    font-weight: bolder;
  }

  .info {
    font-size: 85%;
    color: #5d5d5d;
  }

  .summary {
    text-align: justify;
    padding: 5px 10px;
    margin: 10px 0;
    font-size: 90%;
    line-height: 1.2rem;
    color: #333;
    border-radius: 5px;
    background-color: #ddd;
  }

  .content {
    text-align: justify;

    &:after {
      display: inline-block;
      content: '';
      padding-left: 100%;
    }
  }
}
</style>
